import PropTypes from 'prop-types'
import React, { Component } from 'react'
import { Button, Form, InputNumber, Switch } from 'antd'
import { connect } from 'react-redux'
import { addUserSalaryAsync } from '../../../../_redux/actions_async'

class AdminAddSalaryForm extends Component {
  constructor (props) {
    super(props)
  }

  render () {
    const margin = { margin: 20 }

    return (
      <div style={{ margin: 20 }}>
        <h1>{this.props.title}</h1>
        <Form layout="inline" onFinish={this.props.onFinish}>
          <Form.Item style={margin} name="postSalary" label="岗位工资"
                     rules={[{ required: true }]}>
            <InputNumber/>
          </Form.Item>
          <Form.Item style={margin} name="performanceSalary" label="绩效工资" rules={[{ required: true }]}>
            <InputNumber/>
          </Form.Item>
          <Form.Item style={margin} name="workYearSalary" label="工龄工资" rules={[{ required: true }]}>
            <InputNumber/>
          </Form.Item>
          <Form.Item style={margin} name="allowanceSalary" label="津贴工资" rules={[{ required: true }]}>
            <InputNumber/>
          </Form.Item>
          <Form.Item style={margin} name="flag" label="是否发放">
            <Switch/>
          </Form.Item>
          <Form.Item style={margin}>
            <Button type="primary" htmlType="submit">{this.props.btnName}</Button>
          </Form.Item>
        </Form>
      </div>
    )
  }
}

AdminAddSalaryForm.propTypes = {
  btnName: PropTypes.string,
  title: PropTypes.string,
  onFinish: PropTypes.func
}

AdminAddSalaryForm = connect(
  () => ({}),
  { addUserSalaryAsync }
)(AdminAddSalaryForm)

export default AdminAddSalaryForm